<template>
  <div class="box">
    <header>
      <span class="iconfont icon-xialia-jiantou-copy" @click="returns"></span>
    </header>
    <div class="banner">
      <img src="./img/banner (5).jpg" alt="" />
    </div>
    <h2>购前抢卷更优惠</h2>
    <div class="discounts">
      <p>
        <img src="./img/banner (1).jpg" alt="" />
        <img src="./img/banner (2).jpg" alt="" />
        <img src="./img/banner (3).jpg" alt="" />
        <img src="./img/banner (3).jpg" alt="" />
      </p>
    </div>
    <div class="Lotto">
      <img src="./img/banner (4).jpg" alt="" />
    </div>
    <div class="after-sale">
      <div>
        <span class="iconfont icon-xunhuan"></span>
        <i>超值以旧换新</i>
        <b>至高补贴3999元</b>
      </div>
      <div>
        <span class="iconfont icon-card-full"></span>
        <i>信用卡支付补贴</i>
        <b>最高立减216元</b>
      </div>
      <div>
        <span class="iconfont icon-shengrilibaolibao"></span>
        <i>碎屏保,延保5折</i>
        <b>官方质保售后无忧</b>
      </div>
    </div>
    <h2>新品专区</h2>
    <div class="xin-pin">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6a7002e89afcdc705744bb395ad29ca4.png"
        alt=""
      />
      <div>
        <p>
          <i>Xiaomi 12X</i><br />
          <b>性能、影响、全面更强悍</b>
        </p>
        <p>
          <i>¥<span>3199</span>元</i>
          <button>立即购买</button>
        </p>
      </div>
    </div>
    <div class="xinpin-2">
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
    </div>
    <h2>爆款专区</h2>
    <div class="xinpin-2">
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
    </div>
    <div class="xinpin-2">
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
    </div>
    <div class="xinpin-2">
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
    </div>
    <h2>年货TOP榜</h2>
    <div class="xinpin-2">
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
    </div>
    <div class="xinpin-2">
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
    </div>
    <div class="xinpin-2">
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
      <p>
        <s>
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c0553468a73cc445012577d8993dfc9.png"
            alt=""
        /></s>
        <i>Xiaomi 12</i>
        <b>全新一代 晓龙8</b>
        <i class="jia-ge">¥<span>3199</span>元</i>
        <button>立即购买</button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewYearIsShoppingFestival",
  components: {},
  methods: {
    returns() {
      this.$router.back();
    },
  }
};
</script>

<style scoped>
@import url(../gonggongwenjian/xiaomi-iconfont/iconfont.css);
.box {
  background-color: #bc3347;
}
header {
  height: 0.27rem;
  width: 0.27rem;
  line-height: 0.27rem;
  text-align: center;
  position: fixed;
  top: 0.35rem;
  left: 0.12rem;
  background-color: #722b31;
  color: #fff;
  border-radius: 50%;
}
.banner {
  height: 3.75rem;
  width: 100%;
}
.banner img {
  height: 100%;
  width: 100%;
}
h2 {
  height: 0.42rem;
  width: 100%;
  line-height: 0.42rem;
  text-align: center;
  color: #fff;
  font-size: 0.2rem;
  font-weight: 900;
  letter-spacing: 0.03rem;
}
.discounts {
  height: 1rem;
  width: 3.55rem;
  margin: 0 auto;
  overflow-x: auto;
}
.discounts p {
  height: 100%;
  width: 3.91rem;
  display: flex;
  justify-content: space-between;
}
.discounts p img {
  height: 100%;
}
.Lotto {
  height: 0.78rem;
  width: 3.55rem;
  margin: 0.1rem auto;
}
.Lotto img {
  height: 100%;
  width: 100%;
}
.after-sale {
  height: 0.85rem;
  width: 3.35rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.after-sale div {
  height: 100%;
  width: 1.1rem;
  border-radius: 0.05rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.1rem;
}
.after-sale div .iconfont {
  font-size: 0.3rem;
  color: #d1241e;
}
.xin-pin {
  height: 1.44rem;
  width: 3.5rem;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 0.05rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.xin-pin img {
  height: 0.95rem;
}
.xin-pin div {
  height: 1.2rem;
  width: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.xin-pin div p:nth-child(2) {
  display: flex;
  justify-content: space-between;
}
.xin-pin div p:nth-child(2) button {
  width: 0.75rem;
  height: 0.25rem;
  background-color: #f66806;
  color: #fff;
  border-radius: 0.05rem;
  border: 0;
  font-size: 0.1rem;
}
.xinpin-2 {
  height: 2.75rem;
  width: 3.5rem;
  margin: 0.08rem auto;
  display: flex;
  justify-content: space-between;
}
.xinpin-2 p {
  height: 100%;
  width: 1.73rem;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0.05rem;
  box-sizing: border-box;
  padding-left: 0.08rem;
  justify-content: space-between;
}
.xinpin-2 p s {
  height: 1.75rem;
  width: 100%;
  display: flex;
}
.xinpin-2 p s img {
  margin: auto;
  height: 1.3rem;
}
.xinpin-2 p b {
  font-size: 0.1rem;
  color: #ccc;
}
.xinpin-2 p .jia-ge {
  color: #f85a37;
  font-size: 0.1rem;
}
.xinpin-2 p .jia-ge span {
  font-size: 0.16rem;
}
.xinpin-2 p button {
  height: 0.28rem;
  width: 1.55rem;
  background-color: #f85a37;
  color: #fff;
  border-radius: 0.14rem;
  border: 0;
  margin-bottom: 0.05rem;
}
</style>
